<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM树</title>
		<style type="text/css">
			body{
				background-color: #A6E1EC;
			}
			a{
				background-color: #CE8483;
				font-size: calc(30px);
				color: #122B40;
				padding: 5px 20px 5px 20px;
				margin: 30px;
				border-radius: 20px;
				text-decoration: none;
				transition: 0.5s;
			}
			a:hover{
				color: #D9534F;
				background-color: #204D74;
				box-shadow: 0px 0px 20px #222222;
				
			}
		</style>
	</head>
	<body>
		<h1>JavaScriptfangwenDOM树案例</h1>
		<a href="http://www.taobao.com/" target="_blank">淘宝</a>
		<a class="JD" href="https://www.jd.com/" target="_blank">京东</a>
		<a name="Baidu" href="https://www.baidu.com/" target="_blank">百度</a>
		<a id="PDD" href="https://m.pinduoduo.com/" target="_blank">拼多多</a>
		<!-- 页面上使用JavaScript，通过script标签来实现 -->
		<script>
			//window.alert("妈妈我想吃烤山药");//BOM中提供的弹出框API
			// 获取页面a标签
			//tagname方式
			console.log(document.getElementsByTagName("a")[0].innerText);
			console.log(document.getElementsByTagName("a")[0].href);
			//classname方式
			console.log(document.getElementsByClassName("JD")[0].innerText);
			console.log(document.getElementsByClassName("JD")[0].href);
			//name方式
			console.log(document.getElementsByName("Baidu")[0].innerText);
			console.log(document.getElementsByName("Baidu")[0].href);
			//id方式
			console.log(document.getElementById("PDD").innerText);
			var a=document.getElementsByTagName("a")[0];
			a.innerText="天猫";
			a.href="https://www.tmall.com/";
			var x=100;
			let y=200;
			let z="abc"
			console.log(x*y+z);
			console.log(typeof(z));
			console.log(typeof(x*y+z));
		</script>
	</body>
</html>
